<template>
  <main>
    <font>猜你喜欢</font>
    <div class="paixu">
        <li>综合排序</li>
        <li>距离最近</li>
        <li>销量最高</li>
        <li>筛选</li>
    </div>
    <div class="remai">
        <li>年货节热卖</li>
        <li>津贴联盟</li>
        <li>满减优惠</li>
        <li>品质联盟</li>
    </div>
    <div class="list" v-for="(item,index) in tankList" :key="index">
        <div class="left">
            <img :src="item.pic" alt="">
        </div>
        <div class="right">
            <p>{{item.shopname}}</p>
            <div class="kilo">
                <span>{{item.score}} 月销售{{item.count}}</span>
            <span>{{item.min}}分钟 {{item.long}}km</span>
            </div>
        </div>
    </div>
    <div class="bottom">
        <span v-for="(item,index) in tankList" :key="index" @click="dianji(index)" :class="{sp:true,active:gaoliang==index}">{{item.text}}</span>
   </div>
  </main>
 
</template>

<script>
import image from '../assets/logo.png'
export default {
    data(){
        return {
            gaoliang:0,
            tankList:[
                {pic:image,text:'首页',shopname:'金百万烤鸭(苏家坨店)',score:'4.4',count:1099,long:34,min:34},
                {pic:image,text:'订单',shopname:'稻香金源饺子馆',score:'4.3',count:1809,long:34,min:45},
                {pic:image,text:'我的',shopname:'鸡你太美砂锅',score:'5.0',count:9999,long:'0',min:0},
                
            ]
        }
    },
    methods:{
        dianji(index){
            this.gaoliang=index
        }
        
    }
}
</script>

<style>
   main{
    height: 230px;
    width: 100%;
   }
   main font{
    height: 25px;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
   }
   main .paixu{
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-around;
    list-style: none;
   }
   main .paixu li{
    height: 100%;
    width: 25%;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    font-weight: 700;
   }
   main .remai{
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-around;
    list-style: none;
   }
   main .remai li{
    height: 100%;
    width: 25%;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    background-color: rgba(202, 191, 177, 0.578);
   }
   main .list{
    width: 100%;
    height: 75px;
    display: flex;
   }
   main .left{
    width: 80px;
    height: 100%;
    text-align: center;
   }
   main .left img{
    width: 70%;
    padding-top: 10px;
   }
   .right{
    width: 180px;
   }
   .right p{
    font-size: 14px;
    font-weight: 700;
   }
   .kilo{
    display: flex;
    justify-content: space-between;
   }
   .kilo span{
    font-size: 12px;
    color: red;
   }
   .bottom{
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    border-top: 2px solid gray;
   }
   .bottom span{
    padding-top: 5px;
   }
   .bottom .sp.active{
    color: red;
   }
</style>